<template>
  <view class="ve-cell" :class="{ 've-cell-vertical': layout == 'vertical' }" :style="customStyle">
    <view
      class="ve-cell-title"
      :style="{
        width: calcLabelWidth,
        ...labelStyle,
      }"
    >
      <slot name="label">{{ label }}</slot>
    </view>
    <view
      class="ve-cell-content"
      :style="{
        ...contentStyle,
        textAlign: contentAlign,
      }"
    >
      <slot>{{ result || '-' }}</slot>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'cell',
    props: {
      label: String,
      value: String,
      layout: {
        type: String,
        default: 'horizontal', // horizontal | vertical
      },
      labelStyle: {
        type: Object,
        default: () => ({}),
      },
      contentStyle: {
        type: Object,
        default: () => ({}),
      },
      contentAlign: {
        type: String,
        default: 'right',
      },
      customStyle: {
        type: Object,
        default: () => ({}),
      }
    },
    computed: {
      result() {
        if (this.value || this.value === 0) return this.value
        return ''
      },
      calcLabelWidth() {
        let width = 112
        if (this.label && this.label.length > 4) {
          width += (this.label.length - 4) * 28
        }
        return width + 'rpx'
      }
    },
  }
</script>

<style lang="scss" scoped>
  .ve-cell {
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 44rpx;
    box-sizing: border-box;

    &-title {
      color: #767676;
      flex-shrink: 0;
      margin-right: 32rpx;
    }

    &-content {
      flex: 1;
      color: #1a1a1a;
      word-break: break-all;
    }

    & + .ve-cell {
      margin-top: 24rpx;
    }
  }
  .ve-cell-vertical {
    display: block;
    .ve-cell-title {
      margin-right: 0;
      width: 100%;
      margin-bottom: 24rpx;
    }

    .ve-cell-content {
      width: 100%;
      text-align: unset;
      display: block;
      word-break: break-all;
    }
  }
</style>
